<template>
    <u-popup
        ref="mainPopup"
        mode="center"
        bgColor="transparent"
        :show="isShow"
        :overlay="true"
        @close="close"
        @open="show">
        <view class="box">
            <img class="banner" mode="aspectFill" :show-menu-by-longpress="true"  @click="jump" :src="bannerUrl" alt="banner"/>
            <img class="exitIcon" mode="heightFix" @click="close" src="~svg/icon_exit.svg" alt="exit"/>
        </view>
    </u-popup>
</template>

<script>
    export default {
        name: 'MainPopup',
        components: { },
        props: {
            bannerUrl: {
                require: true,
                type: String
            },
            link: {
                require: true,
                type: String
            }
        },
        data() {
            return {
                isShow: true
            };
        },
        methods: {
            close() {
                this.isShow = false;
            },
            show() {
                this.isShow = true;
            },
            jump() {
                if (this.link && this.link.indexOf('miniprogram://') !== -1) {
                    const url = this.link.substring(14, this.link.length);
                    uni.navigateTo({
                        url: '/' + url,
                        fail(err) {
                            console.error(err);
                        }
                    });
                } else if (this.link.indexOf('web://') !== -1) {
                    const encoded64Url = Buffer.from(this.link.substring(6, this.link.length)).toString('base64');
                    uni.navigateTo({
                        url: '/pages/webview/index?url=' + encoded64Url,
                        fail(err) {
                            console.error(err);
                        }
                    });
                } else if (this.link.indexOf('third://') !== -1) {
                    const strArray = this.link.split('#');
                    uni.navigateToMiniProgram({
                        appId: strArray[0].substring(8),
                        path: strArray[1],
                        envVersion: 'release'
                    });
                }
            }
        }
    };
</script>

<style lang="scss" scoped>
@import "~styles/global.scss";
.box{
    @include flexColumnCenter;
    .banner {
        width: px2rpx(315);
        height: px2rpx(560);
        border-radius: px2rpx(16);
    }
    .exitIcon {
        margin-top: px2rpx(15);
        width: px2rpx(16);
        height: px2rpx(16);
        padding: px2rpx(11);
        border-radius: px2rpx(25);
        border: solid px2rpx(0.5) rgba(151, 151, 151, 0.2);
        background-color: rgba(255, 255, 255, 0.6);
    }
}
</style>
